<template>
    <div>
        <div class="style_context">
            <div v-for="item in dataList" class="style_item">
           
                <img :src="item.image" class="teacher_img" align="left" :alt="item.teacherName" width="150" height="200"/>
                <p class="teacher_name"> {{item.teacherName}}</p>
                <p> {{item.introduce}}</p>
            </div>
        </div>
        <div class="footer"><el-button :disabled="pageIndex>=totalPage" class="button" round @click="getData('next')">加载更多</el-button></div>
    </div>
</template>

<script>
import { teacherstyleApi } from '@/api/teacher';

export default {
    components: {},
    props: {},
    data() {
        return {
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage:0
        };
    },
    watch: {},
    computed: {},
    methods: {
        getData(isNext){
            if(!!isNext){
                this.pageIndex++
            }
            teacherstyleApi.list().then(({page})=>{
                console.log(this.dataList);
                this.dataList = this.dataList.concat(page.list)
                this.totalPage=page.totalPage
                console.log(this);
            })

        }
    },
    created() {
        this.dataList =[]
        this.getData()
    },
    mounted() {}
};
</script>

<style lang="scss">
.style_context{
    min-width: 500px;
    max-width: 1500px;
    .style_item{
        clear: both;
        margin-bottom: 10px;
        min-height: 220px;
        img{
            clear: both;
            margin-right: 15px;
        }
        .teacher_name{
            font-size: 20px;
            font-weight: bolder;
        }
}
}
.footer{
    text-align: center;
    .button{
        margin: auto;
    }
}

</style>

<style lang="scss" scoped>

</style>